<!-- 自定义组件 自定义标签 虚拟标签 虚拟dom -->
<template>
  <div>
    <!-- slot 插槽 分为三种 slot默认插槽 具名插槽 作用域插槽 -->
    <slot name="header"></slot>
    <ElDivider></ElDivider>
    <button :class="btnType" v-for="(e, i) in btns" :key="i">{{ e }}</button>
    <slot></slot>
    <ElDivider></ElDivider>
    <slot name="footer"></slot>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default {
  name: 'MyButtons',
  props: {
    sampleP: {
      type: Number,
      default: 0
    },
    btnType: {
      type: String,
      default: 'primaryEx'
    },
    btns: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      sampleD: 'value'
      //   btns: ['abc', 'def', 'ghi']
      //   btnType:'primaryEx'
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="css" scoped>
.primaryEx {
  color: blueviolet;
  background-color: burlywood;
}
.successEx {
  color: greenyellow;
  background-color: darkcyan;
}
</style>
